<template>
  <a-rate v-if="visible" :value="fakeValue" v-bind="$attrs" @change="onChange">
    <template #character>
      <template v-if="icon.length == 1">
        {{ icon }}
      </template>
      <template v-else>
        <s-icon :type="icon" />
      </template>
    </template>
  </a-rate>
</template>
<script>
export default {
  // 继承
  name: 'SRate',
  props: {
    modelValue: {
      required: false
    },
    icon: {
      required: false,
      type: String,
      default: 'start-outlined'
    }
  },
  emits: ['change', 'update:modelValue'],
  data() {
    return {
      fakeValue: this.modelValue,
      visible: true
    }
  },
  watch: {
    modelValue(val) {
      this.fakeValue = val
    },
    icon(val) {
      this.visible = false
      this.$nextTick(() => {
        this.visible = true
      })
    }
  },
  methods: {
    onChange(e) {
      this.$emit('update:modelValue', e)
      this.$emit('change', e)
    }
  }
}
</script>
